<template>
  <div class="album-list">
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
      <el-breadcrumb-item :to="{ path: '/' }">
        <i class="el-icon-s-promotion"></i> 后台管理
      </el-breadcrumb-item>
      <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-divider></el-divider>

    <el-table
        :data="roles"
        border
        highlight-current-row
        height="650"
        style="width: 100%">
      <el-table-column
          type="index"
          label="id"
          align="center"
          width="80">
      </el-table-column>
      <el-table-column
          prop="name"
          align="center"
          width="200"
          label="名称">
      </el-table-column>
      <el-table-column
          prop="description"
          :show-overflow-tooltip="true"
          align="center"
          label="简介">
      </el-table-column>
      <el-table-column
          prop="sort"
          width="150"
          align="center"
          label="排序序号">
      </el-table-column>
      <el-table-column
          align="center"
          label="配置权限">
        <template slot-scope="scope">
          <el-button type="text" @click="listPer(scope.row)">配置权限</el-button>
        </template>
      </el-table-column>
      <el-table-column
          prop="description"
          align="center"
          label="是否启用">
        <template slot-scope="scope">
          <el-switch
              v-model="scope.row.enable"
              active-color="#13ce66"
              @change="change(scope.row)"
              :active-value="1"
              :inactive-value="0">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column
          width="300"
          fixed="right"
          align="center"
          label="操作">
        <template slot-scope="scope">
          <el-button
              size="mini"
              type="primary"
              icon="el-icon-edit"
              circle
              @click="handleEdit(scope.$index, scope.row)"></el-button>
          <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              :disabled="scope.row.enable===1"
              circle
              @click="handleDelete(scope.$index, scope.row)"></el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="修改角色" :visible.sync="dialogFormVisible">
      <el-form :model="roleEdit" label-width="120px">
        <el-form-item label="名称">
          <el-input v-model="roleEdit.name"></el-input>
        </el-form-item>
        <el-form-item label="简介">
          <el-input v-model="roleEdit.description"></el-input>
        </el-form-item>
        <el-form-item label="排序序号">
          <el-input v-model="roleEdit.sort"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="update()">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="配置权限" :visible.sync="dialogForPer">
      <el-tree
          node-key="id"
          default-expand-all
          :data="permissions"
          :props="defaultProps"
          :default-checked-keys="defaultCheckedKey"
          show-checkbox
          @check="handleCheck">
      </el-tree>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogForPer = false">取 消</el-button>
        <el-button type="primary" @click="submitPer">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import CommonUtils from "@/views/utils/CommonUtils";

export default {
  name: "RoleListView",
  data() {
    return {
      roles: [], //角色列表
      roleEdit: {},
      permissions: [], //权限列表
      dialogFormVisible: false,
      dialogForPer: false,
      defaultProps: {
        label: 'name',
        children: 'permissions'
      },
      checkedPer: [], //选中的节点数据
      roleId: '', //当前操作的角色id
      defaultCheckedKey: [], //默认选中的节点id数组
    }
  },
  methods: {
    handleEdit(index, row) {
      axios
          .create(this.getJwt())
          .get("http://localhost:8000/roles/"+row.id).then((res)=>{
            let data = res.data;
            if (data.state === 20000){
              this.roleEdit = data.data;
              this.dialogFormVisible = true;
            }else {
              this.$message.error(data.message)
            }
          })
    },
    handleDelete(index, row) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios
            .create(this.getJwt())
            .delete("http://localhost:8000/roles/"+row.id).then((res)=> {
              let data = res.data
              if (data.state===20000){
                location.reload();
              }else {
                this.$message.error(data.message)
              }
            })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    change(row){
      let url = "http://localhost:8000/roles/"
      if (row.enable === 1){
        url += "enable/"+row.id;
      }else if (row.enable === 0){
        url += "disable/"+row.id;
      }
      axios
          .create(this.getJwt())
          .put(url).then((res)=>{
            let data = res.data;
            if (data.state === 20000){
              location.reload();
            }else {
              this.$message.error(data.message);
            }
          })
    },
    update(){
      let formData = this.qs.stringify(this.roleEdit);
      axios
          .create(this.getJwt())
          .put("http://localhost:8000/roles/"+this.roleEdit.id,formData).then((res)=> {
            let data = res.data;
            if (data.state === 20000){
              this.dialogFormVisible = false;
              location.reload();
            }else {
              this.$message.error(data.message)
            }
      })
    },
    listPer(row){
      if (row.enable === 0){
        this.$message.warning("角色必须启用，才能分配权限");
        return;
      }
      this.defaultCheckedKey = null;
      this.axios //获取权限列表
          .create(this.getJwt())
          .get('http://localhost:8000/permissions/list').then((res) => {
        let data = res.data;
        if (data.state === 20000){
          this.permissions = data.data;
          this.dialogForPer = true;
          this.roleId = row.id;
          this.axios //获取当前角色所拥有的权限信息
              .create(this.getJwt())
              .get('http://localhost:8000/roles/per/'+row.id).then((res)=>{
            let data = res.data;
            if (data.state === 20000){
              this.defaultCheckedKey = data.data;
              return;
            }
            CommonUtils.methods.isFail(data,this);
          })
          return;
        }
        CommonUtils.methods.isFail(data,this);
      })
    },
    handleCheck(data,treeObj){
      //获取当前被选中的节点数据
      this.checkedPer = treeObj.checkedKeys;
      console.log(treeObj);
    },
    submitPer(){
      console.log(this.checkedPer);
      this.axios //注册角色的权限
          .create(this.getJwt())
          .post('http://localhost:8000/roles/reg-per/'+this.roleId,this.checkedPer).then((res) => {
        let data = res.data;
        if (data.state === 20000){
          this.dialogForPer = false;
          return;
        }
        CommonUtils.methods.isFail(data,this);
      })
    },
    getJwt(){
      return {'headers':{'Authorization': localStorage.getItem("jwt")}};
    }
  },
  mounted() {
    //获取角色列表
    this.axios
        .create(this.getJwt())
        .get('http://localhost:8000/roles/list').then((res) => {
          let data = res.data;
          if (data.state === 20000){
            this.roles = data.data;
            return;
          }
          CommonUtils.methods.isFail(data,this);
        })
  }
}
</script>

<style>
 .album-list{
   width: 1450px;
 }
</style>